<template>
	<view>
		<view class="top-bg">
			
			
		</view>
	
		<u-navbar :is-back="true" title="测试结果" back-icon-color="#000" :border-bottom="false" title-color="#fff" :background="{}"></u-navbar>
		<view class="bg">
			<view class="res-title">测试结果</view>
			<view class="charts-box">
			  <qiun-data-charts 
			    type="pie"
			    :chartData="chartData"
			    :errorShow="false"
			    background="none"
					:opts="opts"
			  />
			</view>
			
			<view class="content">
				<view class="title">您的性格属于</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="tit">{{item.ratio}}% {{item.title}}</view>
					<view class="parse">{{item.parse}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opts:{
					"color": [],
					"legend": {
						"show": false
					}
				},
				chartData:{
					series:[{
						data:[]
					}]
				},
				show:!1,
				list:[],
				parseIds:[]
			}
		},
		methods: {
				testParse(){
					this.$u.api.testParse({
						data:[{
							parse_id:1,
							num:Number(this.parseIds[0])
						},{
							parse_id:2,
							num:Number(this.parseIds[1])
						},{
							parse_id:3,
							num:Number(this.parseIds[2])
						},{
							parse_id:4,
							num:Number(this.parseIds[3])
						}],
						total:this.parseIds.reduce((pre,next)=>pre + Number(next),0)
					}).then(res=>{
						
						this.opts = {
							"color": res.map(i=> i.color),
							"legend": {
								"show": false
							}
						}
						
						// 饼状图最后一个数值校正
						// 总和,使用高精度
						let num = res.reduce((pre,next)=>this.$app.math.add(pre,Number(next.ratio)),0)
						let deff = this.$app.math.sub(100,num)
						console.log('精度差',deff)
						res[0].ratio = this.$app.math.add(res[0].ratio,deff)
						this.chartData = {
							series:[{
								data:res.map(i=>({name:i.title,value:Number(i.ratio)}))
							}]
						}
						
						this.list = res
					})
				}
		},
		onLoad(o) {
			this.parseIds = o.parseIds.split(',')
			this.testParse()
		}
	}
</script>

<style lang="scss">
	.top-bg{
		background: linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%);
		position: absolute;height: 218rpx;overflow: hidden;width: 100%;
		&::after{content: '';display: block;position: absolute;bottom: -195rpx;left: 50%;transform: translateX(-50%);border: 200rpx solid #fff;width: 2500rpx;height: 2500rpx;border-radius: 50%;}
	}
	.bg{background-color: #fff;border-radius: 50rpx 50rpx 0 0;min-height: 95vh;margin-top: 40rpx;}
	.res-title{text-align: center;font-weight: bold;font-size: 44rpx;padding: 40rpx 0;}
	.charts-box{
	  width: 70%;
	  height:200px;
		margin: 0 auto;
	}
	.content{padding: 0 60rpx;word-break: break-all;
		.title{border-bottom: 1rpx solid #ddd;line-height: 90rpx;font-weight: bold;font-size: 34rpx;}
		.item{
			.tit{font-weight: bold;padding: 15rpx 0;font-size: 30rpx;}
			.parse{color: #666;line-height: 50rpx;}
		}
	}
</style>
